import { useCallback, useMemo } from "react";
import { useSelector, useDispatch } from "react-redux";

import { increment, decrement, selectCount } from "./AppSlice";

// https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/counter?file=/src/features/counter/Counter.js:351-359

function App() {
  const count = useSelector(selectCount);
  const dispatch = useDispatch();

  const handleIncrement = useCallback(() => {
    dispatch(increment());
  }, [dispatch, increment]);

  const handleDecrement = () => {
    dispatch(decrement());
  };

  const oddOrEven = useMemo(() => (count % 2 === 0 ? "偶数" : "奇数"), [count]);

  return (
    <>
      <div>App {count}</div>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </>
  );
}

export default App;
